<template>
  <div style="background-color: #f8f8f8;" v-on:click="checkPage()" >
    <div style="height:20px;padding: 5px;background-color: #fff;box-shadow:0 0 10px 0 rgba(128,145,165,0.2)">
      <div style="float: left;margin-left: 3px;height: 20px;" >
        局号: {{gameNumber}}
      </div>
      <div style="float: right;margin-right: 3px;height: 20px;" >
        余额: {{account.yue}}
      </div>
    </div>
    <div style="padding: 5px;padding-bottom: 0px;" >
      <table style='width: 100%;' border='0' v-on:click="chanageResultClass()"  >
        <tr v-for='i in hang' :key="i">
          <td v-for=' n in lie ' :key="n" width="5%"  >
            <div :class="getGameResultClass(n*hang-(hang-i))" >{{getGameResult(n*hang-(hang-i))}}</div>
          </td>
        </tr>
      </table>
    </div>
    <div class="weui-flex">
      <div class="weui-flex__item"><div class="tishi">{{tiShiText}} <span class="daojishi">{{xiazhuSecond==-1||(xiazhuSecond==0&&kaijiangSecond==0) ? '' : xiazhuSecond}} {{kaijiangSecond==-1||kaijiangSecond==0||xiazhuSecond > -1 ? '' : kaijiangSecond}}</span></div></div>
    </div>
    <div >
      <div class="weui-flex">
        <div><div class="xiazhu-btn cancel" :class="xiaZhuEnable ? '' : 'disabled'" v-on:click="noXiaZhu()">取消</div></div>
        <div class="weui-flex__item">
          <div class="count" v-if="resultsView=='单双'">单 {{danCount}}  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 双 {{shuangCount}}</div>
          <div class="count" v-if="resultsView=='大小'">大 {{daCount}}  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 小 {{xiaoCount}}</div>
        </div>
        <div><div class="xiazhu-btn ok" :class="xiaZhuEnable ? '' : 'disabled'" v-on:click="okXiaZhu()">确定</div></div>
      </div>
    </div>
    <div style="overflow-y: auto;" >
      <div class="weui-flex" style="width: 450px;padding-left: 15px;">
        <!--<div class="" v-on:click="selectChouMa(10)" >
          <div class="choumalist"  :class="selectZhouMa==10 ? 'active' : '' "><svg class="icon" aria-hidden="true"><use xlink:href="#icon-chouma-10"></use></svg>
            <b class="number" style="" >10</b>
          </div>
        </div>-->
        <div class="" v-on:click="selectChouMa(20)" >
          <div class="choumalist"  :class="selectZhouMa==20 ? 'active' : '' "><svg class="icon" aria-hidden="true"><use xlink:href="#icon-chouma-20"></use></svg>
            <b class="number2" style="" >20</b>
          </div>
        </div>
        <div class="" v-on:click="selectChouMa(50)" >
          <div class="choumalist"  :class="selectZhouMa==50 ? 'active' : '' "><svg class="icon" aria-hidden="true"><use xlink:href="#icon-chouma-50"></use></svg>
            <b class="number2" style="" >50</b>
          </div>
        </div>
        <div class="" v-on:click="selectChouMa(100)" >
          <div class="choumalist"  :class="selectZhouMa==100 ? 'active' : '' "><svg class="icon" aria-hidden="true"><use xlink:href="#icon-chouma-100"></use></svg>
            <b class="number3" style="" >100</b>
          </div>
        </div>
        <div class="" v-on:click="selectChouMa(200)" >
          <div class="choumalist"  :class="selectZhouMa==200 ? 'active' : '' "><svg class="icon" aria-hidden="true"><use xlink:href="#icon-chouma-200"></use></svg>
            <b class="number3" style="" >200</b>
          </div>
        </div>
        <div class="" v-on:click="selectChouMa(500)" >
          <div class="choumalist"  :class="selectZhouMa==500 ? 'active' : '' "><svg class="icon" aria-hidden="true"><use xlink:href="#icon-chouma-500"></use></svg>
            <b class="number3" style="" >500</b>
          </div>
        </div>
        <div class="" v-on:click="selectChouMa(1000)" >
          <div class="choumalist"  :class="selectZhouMa==1000 ? 'active' : '' "><svg class="icon" aria-hidden="true"><use xlink:href="#icon-chouma"></use></svg>
            <b class="number4" style="" >1000</b>
          </div>
        </div>
        <div class="" v-on:click="selectChouMa(2000)" >
          <div class="choumalist"  :class="selectZhouMa==2000 ? 'active' : '' "><svg class="icon" aria-hidden="true"><use xlink:href="#icon-chouma"></use></svg>
            <b class="number4" style="" >2000</b>
          </div>
        </div>
      </div>
    </div>
    <div>
      <div class="weui-flex" style="">
        <div class="weui-flex__item">
          <div class="jieguo" :class="isZhuanIndex('1')" style="height: 50px;" v-on:click="xiaZhu('yi')"  >
            <div class="xiazhu-jine" :class="xiaZhuEDengYuOkXiaZhuE('yi') ? 'ok' : 'no' " >{{getXiaZhuJinE('yi')}}</div>
            <div class="peilv i13">赔 2.85</div>
            一
          </div>
        </div>
      </div>
      <div class="weui-flex" style="">
        <div class="weui-flex__item">
          <div class="jieguo" :class="isZhuanIndex('4')" style="height: 120px;" v-on:click="xiaZhu('si')">
            <div class="xiazhu-jine i24" :class="xiaZhuEDengYuOkXiaZhuE('si') ? 'ok' : 'no' " >{{getXiaZhuJinE('si')}}</div>
            <div class="peilv i24">赔 2.85</div>
            <div style="margin-top: 30px;" >四</div>
          </div>
        </div>
        <div class="">
          <div class="zhuo-mian" :class="isResult('da')" v-on:click="xiaZhu('da')">
            <div class="xiazhu-jine" :class="xiaZhuEDengYuOkXiaZhuE('da') ? 'ok' : 'no' " >{{getXiaZhuJinE('da')}}</div>
            <div class="peilv">赔 0.95</div>
            大
          </div>
          <div class="zhuo-mian" :class="isResult('xiao')" v-on:click="xiaZhu('xiao')">
            <div class="xiazhu-jine" :class="xiaZhuEDengYuOkXiaZhuE('xiao') ? 'ok' : 'no' " >{{getXiaZhuJinE('xiao')}}</div>
            <div class="peilv">赔 0.95</div>
            小
          </div>
        </div>
        <div class="">
          <div class="zhuo-mian" :class="isResult('dan')"  v-on:click="xiaZhu('dan')">
            <div class="xiazhu-jine" :class="xiaZhuEDengYuOkXiaZhuE('dan') ? 'ok' : 'no' " >{{getXiaZhuJinE('dan')}}</div>
            <div class="peilv">赔 0.95</div>
            单
          </div>
          <div class="zhuo-mian" :class="isResult('shuang')"  v-on:click="xiaZhu('shuang')">
            <div class="xiazhu-jine" :class="xiaZhuEDengYuOkXiaZhuE('shuang') ? 'ok' : 'no' " >{{getXiaZhuJinE('shuang')}}</div>
            <div class="peilv">赔 0.95</div>
            双
          </div>
        </div>
        <div class="weui-flex__item">
          <div class="jieguo" :class="isZhuanIndex('2')" style="height: 120px;" v-on:click="xiaZhu('er')" >
            <div class="xiazhu-jine i24" :class="xiaZhuEDengYuOkXiaZhuE('er') ? 'ok' : 'no' " >{{getXiaZhuJinE('er')}}</div>
            <div class="peilv i24">赔 2.85</div>
            <div style="margin-top: 30px;" >二</div>
          </div>
        </div>
      </div>
      <div class="weui-flex" style="">
        <div class="weui-flex__item">
          <div class="jieguo" :class="isZhuanIndex('3')" style="height: 50px;" v-on:click="xiaZhu('san')" >
            <div class="xiazhu-jine" :class="xiaZhuEDengYuOkXiaZhuE('san') ? 'ok' : 'no' " >{{getXiaZhuJinE('san')}}</div>
            <div class="peilv i13">赔 2.85</div>
            三
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ZhuanPan',
  data () {
    return {
      lie: 15,
      hang: 6,
      gameResults: [],
      resultsView: '',
      danCount: 0,
      shuangCount: 0,
      daCount: 0,
      xiaoCount: 0,
      gameStatus: 1,
      gameNumber: 0,
      tiShiText: '',
      account: {},
      yao: true,
      result: 0,
      selectZhouMa: 20,
      xiazhuSecond: 0,
      kaijiangSecond: 0,
      xiaZhuEnable: false,
      gameRules: {
        da: {xiaZhuE: 0, okXiaZhuE: 0},
        xiao: {xiaZhuE: 0, okXiaZhuE: 0},
        dan: {xiaZhuE: 0, okXiaZhuE: 0},
        shuang: {xiaZhuE: 0, okXiaZhuE: 0},
          zhong: {xiaZhuE: 0, okXiaZhuE: 0},
          bian: {xiaZhuE: 0, okXiaZhuE: 0},
          yi: {xiaZhuE: 0, okXiaZhuE: 0},
          er: {xiaZhuE: 0, okXiaZhuE: 0},
          san: {xiaZhuE: 0, okXiaZhuE: 0},
          si: {xiaZhuE: 0, okXiaZhuE: 0}
      },
      gameRecords:[],
      zhuanIndex:0,
      suiJi:1
    }
  },
  created () {
      this.pageInit()
  },
  methods: {
      pageInit: function(){
          this.getAccount()
          this.getGameResults()
          this.$http.post('zhuanPan/getNewGameNumber', {}).then(function (response) {
              var data = response.data.data
              if (!data.gameStatus){
                  this.gameDisabled()
              }else {
                  var gameRecords = data.gameRecords
                  if (gameRecords.length > 0){
                      for (var i=0;i<gameRecords.length;i++){
                          var gameRuleCode = gameRecords[i].gameRuleCode
                          var chip = gameRecords[i].chip
                          this.gameRules[gameRuleCode].okXiaZhuE = this.gameRules[gameRuleCode].okXiaZhuE + chip
                          this.gameRules[gameRuleCode].xiaZhuE = this.gameRules[gameRuleCode].xiaZhuE + chip
                      }
                  }
                  this.xiazhuSecond = data.xiazhuSecond
                  this.kaijiangSecond = data.kaijiangSecond - this.xiazhuSecond;
                  this.gameNumber = data.gameNumber
                  this.xiaZhuDaoJiShi()
              }
          })
          this.resultsView = '大小'
      },
    getAccount: function(){
        this.$http.post('account/getAccount', {}).then(function (response) {
            this.account = response.data.data.account
        })
    },
    getGameResults: function (index) {
        this.$http.post('zhuanPan/getNewSceneGameResults', {}).then(function (response) {
            this.gameResults = response.data.data.sceneGameResults
            for (var i = 0; i < this.gameResults.length; i++) {
                var result = parseInt(this.gameResults[i].result)
                this.countJiSuan(result);
            }
        })
    },
    countJiSuan: function(result){
        if (result === 1 || result === 3) {
            this.danCount++
        } else {
            this.shuangCount++
        }
        if (result === 1 || result === 2) {
            this.xiaoCount++
        } else {
            this.daCount++
        }
    },
    getGameResult: function (index) {
      index = index - 1
      if (index < this.gameResults.length) {
        var result = parseInt(this.gameResults[index].result)
        return result
      } else {
        return ''
      }
    },
      getGameResultClass: function (index) {
          index = index - 1
          if (index < this.gameResults.length) {
              var result = parseInt(this.gameResults[index].result)
              if(this.resultsView=='大小'){
                  if(result==1||result==2){
                      return 'lan'
                  }else{
                      return 'hong'
                  }
              }else if(this.resultsView=='单双'){
                  if(result==2||result==4){
                      return 'lan'
                  }else{
                      return 'hong'
                  }
              }else if(this.resultsView=='中边'){
                  if(result==2||result==3){
                      return 'lan'
                  }else{
                      return 'hong'
                  }
              }
          } else {
              return ''
          }
      },
      chanageResultClass: function(){
        if(this.resultsView == '大小'){
            this.resultsView = '单双'
        }else if(this.resultsView == '单双'){
            this.resultsView = '大小'
            //this.resultsView = '中边'
        }else if(this.resultsView == '中边'){
            this.resultsView = '大小'
        }
      },
    getResult: function() {
        var that = this
        this.zhuanIndex = 1
        this.zhuanZhuan()
        this.$http.post('zhuanPan/getResult?gameNumber='+this.gameNumber, {}).then(function (response) {
            var data = response.data.data
            that.result = data.result
            setTimeout(function () {
                that.countJiSuan(parseInt(that.result));
                that.account.yue = data.yue
                that.gameRecords = data.gameRecords
                if (data.resultChip!=0) {
                    that.showTips((data.resultChip > 0 ? "你赢了 " : "你输了 ") + data.resultChip, 2000)
                }
                if (!data.gameStatus){
                    that.gameResults.push({result: data.result})
                    that.gameDisabled()
                }else {
                    that.gameResults.push({result: data.result})
                    if (data.isEndScene) {
                        setTimeout(function () {
                            that.getGameResults()
                        },5000)
                    }
                }
            },800)
            setTimeout(function () {
                that.gameNumber = data.gameNumber;
                that.xiazhuSecond = data.xiazhuSecond
                that.kaijiangSecond = data.kaijiangSecond - that.xiazhuSecond;
                that.result = 0
                that.zhuanIndex = 0
                that.cleanXiaZhu()
                that.xiaZhuDaoJiShi()
            },3000)

        })
    },
    gameDisabled: function() {
        this.tiShiText = '游戏维护中...'
        this.xiaZhuEnable = false
    },
    cleanXiaZhu: function() {
        this.gameRules = {
            da: {xiaZhuE: 0, okXiaZhuE: 0},
            xiao: {xiaZhuE: 0, okXiaZhuE: 0},
            dan: {xiaZhuE: 0, okXiaZhuE: 0},
            shuang: {xiaZhuE: 0, okXiaZhuE: 0},
            zhong: {xiaZhuE: 0, okXiaZhuE: 0},
            bian: {xiaZhuE: 0, okXiaZhuE: 0},
            yi: {xiaZhuE: 0, okXiaZhuE: 0},
            er: {xiaZhuE: 0, okXiaZhuE: 0},
            san: {xiaZhuE: 0, okXiaZhuE: 0},
            si: {xiaZhuE: 0, okXiaZhuE: 0}
        }
    },
    xiaZhu: function (key) {
      this.gameRules[key].xiaZhuE = this.gameRules[key].xiaZhuE + this.selectZhouMa
    },
    getXiaZhuJinE: function (key) {
      return this.gameRules[key].xiaZhuE === 0 ? '' : this.gameRules[key].xiaZhuE
    },
    xiaZhuEDengYuOkXiaZhuE: function (key) {
      return this.gameRules[key].xiaZhuE === this.gameRules[key].okXiaZhuE
    },
    okXiaZhu: function () {
      if (!this.xiaZhuEnable){
          return false;
      }
      var xiaZhuDatas = []
      var xiaZhuE = 0;
      for (var key in this.gameRules) {
          var gameRule = this.gameRules[key]
          if(gameRule.xiaZhuE - gameRule.okXiaZhuE > 0) {
            var xiaZhuData = {chip: gameRule.xiaZhuE - gameRule.okXiaZhuE, gameRuleCode: key, gameNumber: this.gameNumber}
            xiaZhuDatas.push(xiaZhuData)
            xiaZhuE = xiaZhuE+xiaZhuData.chip
        }
      }
      if(xiaZhuE > this.account.yue){
          this.showTips("余额不足", 1000)
          return false;
      }
        this.$http.post('zhuanPan/xiaZhu', xiaZhuDatas).then(function (response) {
            this.account.yue = this.account.yue - xiaZhuE
            for (var key in this.gameRules) {
                var gameRule = this.gameRules[key]
                this.gameRules[key].okXiaZhuE = gameRule.xiaZhuE
            }
        })
    },
    noXiaZhu: function () {
      for (var key in this.gameRules) {
        var gameRule = this.gameRules[key]
        this.gameRules[key].xiaZhuE = gameRule.okXiaZhuE
      }
    },
    selectChouMa: function (chouMa) {
      this.selectZhouMa = chouMa
    },
    xiaZhuDaoJiShi: function () {
      var that = this
      if (this.xiazhuSecond > 0) {
        this.tiShiText = '开始下注'
        this.xiaZhuEnable = true
        setTimeout(function () {
          that.xiaZhuDaoJiShi()
        }, 1000)
      }
      if (this.xiazhuSecond === 0) {
        this.xiaZhuEnable = false
        this.noXiaZhu()
        this.kaiJiangDaoJiShi()
      }
      this.xiazhuSecond--
    },
    kaiJiangDaoJiShi: function () {
      var that = this
      if (this.kaijiangSecond > 0) {
        this.tiShiText = '等待开奖'
        setTimeout(function () {
          that.kaiJiangDaoJiShi()
        }, 1000)
      }
      if (this.kaijiangSecond === 0){
         this.result = 0
         this.tiShiText = '开奖中...'
         //this.suiJi = Math.ceil(Math.random() * 2)
         this.getResult()
      }
      this.kaijiangSecond--
    },
    showTips: function (content,millisecond) {
        window.parent.document.getElementById('tips').style.display='';
        window.parent.document.getElementById('tipsContent').innerHTML=content;
        setTimeout(function () {
            window.parent.document.getElementById('tips').style.display='none';
        }, millisecond);
    },
      showTipsNoClose: function (content) {
          window.parent.document.getElementById('tips').style.display='';
          window.parent.document.getElementById('tipsContent').innerHTML=content;
      },
      isZhuanIndex: function (index) {
          return this.zhuanIndex == index ? 'active' : ''
      },
      isResult: function (key) {
          if(key=='dan'){
              return this.result == 1 || this.result == 3 ? 'active' : ''
          }else if(key=='shuang'){
              return this.result == 2 || this.result == 4 ? 'active' : ''
          }else if(key=='da'){
              return this.result == 3 || this.result == 4 ? 'active' : ''
          }else if(key=='xiao'){
              return this.result == 1 || this.result == 2 ? 'active' : ''
          }
          return ''
      },
      zhuanZhuan: function () {
          var that = this
          var result = that.result
          if(result!=0&&result == this.zhuanIndex) {
              //console.log(result + "-" + this.zhuanIndex)
          }else{
              this.zhuanIndex++
              if(this.zhuanIndex==5){
                  this.zhuanIndex = 1
              }
              setTimeout(function () {
                  that.zhuanZhuan()
              }, 100)
          }
      },
      checkPage: function () {
          if(this.xiazhuSecond + this.kaijiangSecond>0) {
            this.$http.post('zhuanPan/getNewGameNumber', {}).then(function (response) {
                var data = response.data.data
                if (data.gameNumber == this.gameNumber) {
                    //console.log(( this.kaijiangSecond + this.xiazhuSecond)+"-"+( data.kaijiangSecond))
                    var chaZhi = ( this.kaijiangSecond + this.xiazhuSecond) - ( data.kaijiangSecond)
                    if(chaZhi > 2 || chaZhi < -2){
                        if(data.xiazhuSecond>0) {
                            this.xiazhuSecond = data.xiazhuSecond
                        }else {
                            this.kaijiangSecond = data.kaijiangSecond
                        }
                    }
                } else {
                    this.$router.push({name: 'Reload'});
                }
            })
        }
      }
  }
}
</script>
<style>
  table,table tr th, table tr td { border:1px solid #ebebeb;height: 22px; padding-left: 1px;padding-right: 1px;}
  table,table tr th, table tr td div { height: 19px;border-radius: 25px; font-size: 12px;line-height: 19px;font-weight: bold;color: white;}
  table { width: 200px; min-height: 25px; line-height: 25px; text-align: center; border-collapse: collapse;}
  .dan {
    background: red;
  }
  .shuang{
    background: dodgerblue;
  }
  .hong {
    background: red;
  }
  .lan{
    background: dodgerblue;
  }
  .daojishi{
    color: red;
  }
  .chou-ma{
    margin: 5px;
    padding: 0 10px;
    background-color: #ebebeb;
    height: 2.3em;
    line-height: 2.3em;
    text-align: center;
  }
  .chou-ma.active{
    border:1px solid dodgerblue;
  }
  .tishi{
    padding: 0 12px;
    background-color: #ebebeb;
    height: 2.3em;
    line-height: 2.3em;
    text-align: center;
    color: sandybrown;
    font-weight: bold;
  }
  .count {
    margin: 5px;
    padding: 0 10px;
    background-color: #ebebeb;
    height: 2.3em;
    line-height: 2.3em;
    text-align: center;
    border-radius: 5px;
  }
  .jieguo.active {
    animation:fade 200ms infinite;
    -webkit-animation:fade 200ms infinite;
  }
  .jieguo {
    margin: 1px;
    padding: 0 10px;
    background-color: #2d743e;
    height: 2.4em;
    line-height: 2.3em;
    text-align: center;
    border:1px solid #ebebeb;
    color: white;
    position: relative;
  }
  .zhuo-mian{
    width: 82px;
    height: 58px;
    margin: 1px;
    padding: 0 10px;
    background-color: #308a46;
    line-height: 50px;
    text-align: center;
    border:1px solid #ebebeb;
    position: relative;
    color: white;
  }
  .jieguo .xiazhu-jine{
    top:-5px;
  }
  .xiazhu-jine{
    width:20px;
    height:20px;
    border-radius:60%;
    position:absolute;
    top:-10px;
    right:20px;
    font-weight: 600;
    color: #fff;
  }
  .peilv{
    width:50px;
    height:20px;
    border-radius:60%;
    position:absolute;
    bottom:13px;
    left:25px;
    font-size: 12px;
    color: darkgray;
  }
  .peilv.i13{
    left:43%;
    bottom:8px;
  }
  .peilv.i24{
    width:50px;
    height:20px;
    border-radius:60%;
    position:absolute;
    bottom:13px;
    left:10%;
    font-size: 12px;
  }
  .xiazhu-jine.i24{
    right:18px;
  }
  .xiazhu-jine.ok{
    color: #efb336;
  }
  .xiazhu-btn.ok{
    margin: 5px;
    padding: 0 10px;
    background-color: green;
    height: 2.3em;
    line-height: 2.3em;
    text-align: center;
    color: white;
    border-radius: 3px;
  }
  .xiazhu-btn.ok:active {
    color: rgba(255, 255, 255, 0.6);
    background-color: #179B16;
    border-radius: 3px;
  }
  .xiazhu-btn.ok.disabled{
    color: rgba(255, 255, 255, 0.6);
    background-color: #9ED99D;
  }
  .xiazhu-btn.cancel{
    margin: 5px;
    padding: 0 10px;
    background-color: red;
    height: 2.3em;
    line-height: 2.3em;
    text-align: center;
    color: white;
    border-radius: 3px;
  }
  .xiazhu-btn.cancel:active {
    color: rgba(255, 255, 255, 0.6);
    background-color: #CE3C39;
    border-radius: 3px;
  }
  .xiazhu-btn.cancel.disabled{
    color: rgba(255, 255, 255, 0.6);
    background-color: #EC8B89;
  }
  .choumalist{
    position: relative;width: 50px;height: 45px;margin-top: 8px;
  }
  .choumalist .icon {
    width: 2.3em;
    height: 2.3em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
  }
  .choumalist .number{
    position: absolute;
    top: 6px;left: 15px;
  }
  .choumalist .number2{
    position: absolute;
    top: 6px;left: 16px;
  }
  .choumalist .number3{
    position: absolute;
    top: 9px;left: 14px;
    font-size: 12px;
  }
  .choumalist .number4{
    position: absolute;
    top: 9px;left: 12px;
    font-size: 10px;
  }
  .choumalist.active{
    margin-top: 1px;
  }
  @keyframes fade {
    from { opacity: 1.0; }
    50% { opacity: 0.7; }
    to { opacity: 1.0; }
  }
  @-webkit-keyframes fade {
    from { opacity: 1.0; }
    50% { opacity: 0.7; }
    to { opacity: 1.0; }
  }
  .zhuo-mian.active {
    animation:fade 200ms infinite;
    -webkit-animation:fade 200ms infinite;
  }
</style>
